<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style type="text/css">
        body{
            margin:100px 0px 0px 0px;
        }
        @keyframes login_flash{
            from{height: 0px;}
            to{height: 320px;}
        }
        #login{
            width: 300px;
            height: 320px;
            background-color: rgba(0,0,0,0.2);
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            margin: 0px auto;
            padding-bottom: 30px;
            animation-name: login_flash;
            animation-duration:2s;
        }
        p{
            text-align: center;
            line-height: 70px;
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
            text-shadow: #000000 2px 2px 10px;
        }
        input{
            width: 250px;
            height: 30px;
            border-radius: 2px;
            border:none;
            position: absolute;
            text-align: center;
            box-shadow: #000000 2px 2px 20px;
            left: 24px;
            margin: 20px auto;
        }
        #username{
            top: 80px;
        }
        #username:hover{
            background-color: #fdffd5;
        }
        #password{
            top: 150px;
        }
        #password:hover{
            background-color: #fdffd5;
        }
        div>form>div{
            position: absolute;
            width: 250px;
            height: 20px;
            left: 24px;
            visibility: hidden;
            line-height: 20px;
            text-align: left;
            font-size: 10px;
            color: red;
        }
        #checkuser{
            top: 140px;
        }
        #checkpass{
            top:210px;
        }
        input[type='submit']{
            left: 24px;
            top:230px;
            color: white;
            background-color: #27b0f6;
            cursor: pointer;
        }
        input[type='submit']:hover{
            background-color: #0000ff;
        }
        a{
            text-decoration: none;
            position: absolute;
            top: 300px;
            color: #ffffff;
            font-size: 10px;
            font-weight: bold;
        }
        a:hover{
            color: red;
        }
        #forget{
            float: left;
            left: 24px;
        }
        #reg{
            float: right;
            right: 24px;
        }
    </style>
    <script type="text/javascript">
        onload=function(){
            var username=document.getElementById("username");
            var password=document.getElementById("password");
            var checkuser=document.getElementById("checkuser");
            var checkpass=document.getElementById("checkpass");
        }
        function checkUsername() {
            reg=/^\w{6,15}$/;
            if (username.value==""){
                checkuser.style.visibility="visible";
                checkuser.style.color="red";
                checkuser.innerHTML="用户名不能为空！";
            }else if(reg.test(username.value)){
                checkuser.style.visibility="visible";
                checkuser.style.color="green";
                checkuser.innerHTML="格式正确！";
                return true;
            }else {
                checkuser.style.visibility="visible";
                checkuser.style.color="red";
                checkuser.innerHTML="格式错误！请输入6-15为数字或字母";
                return false;
            }
        }
        function checkPassword() {
            reg=/^\w{6,15}$/;
            if (password.value==""){
                checkpass.style.visibility="visible";
                checkpass.style.color="red";
                checkpass.innerHTML="密码不能为空！";
            }else if(reg.test(password.value)){
                checkpass.style.visibility="visible";
                checkpass.style.color="green";
                checkpass.innerHTML="格式正确！";
                return true;
            }else {
                checkpass.style.visibility="visible";
                checkpass.style.color="red";
                checkpass.innerHTML="格式错误！请输入6-15为数字或字母";
                return false;
            }
        }
    </script>
</head>
<body>
<div id="login">
    <p>欢迎登录本网站</p>
    <form action="#" method="post" onsubmit="return checkUsername()+checkPassword()==2">
        <input type="text" name="username" value="" id="username" placeholder="请输入用户名" onclick="" onblur="checkUsername()">
        <div id="checkuser">登录失败！用户名或密码错误</div>
        <input type="password" name="password" value="" id="password" placeholder="请输入用户密码" onclick="" onblur="checkPassword()">
        <div id="checkpass">登录失败！用户名或密码错误</div>
        <input type="submit" value="登录">
        <a href="#" id="forget">忘记密码？</a>
        <a href="#" id="reg">注册新账号</a>
    </form>
</div>
</body>
</html>